<%--
  Created by IntelliJ IDEA.
  User: 方堃
  Date: 2018/9/30
  Time: 10:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>按人员调整排班</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../../lib/fullcalendar/css/fullcalendar.css"/>
    <link rel="stylesheet" type="text/css" href="../../lib/fullcalendar/css/fullcalendar.print.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/pagination/style/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/laydate.css"/>
    <link rel="stylesheet" type="text/css" href="../css/attend/myAttendance.css"/>
    <script src="/js/common/language.js"></script>
    <script src="../js/jquery/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/laydate.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>

    <style>
        html{ height: 100%;  overflow: hidden; }

        body{  position: relative;  overflow: auto;  height: 100%;  }

        .navs{  padding: 20px 30px;  box-sizing: border-box;  }

        .laydate_table {  display: none;  }

        #laydate_hms{  display: none !important;  }

        .search{  padding: 6px 10px;  cursor: pointer;  color: #ffffff;  margin-left: 10px;  background: #2b7fe0;  border-radius: 4px;  }

        .personality .editFlag {
            border-top: 10px solid #dadada;
            border-left: 5px solid transparent;
            position: absolute;
            top: 0;
            right: 0;
        }

        .mains{
            overflow-y: auto;
            padding: 20px;
            display: none;
            padding-top: 0;
        }

        .hint{
            padding: 16px 16px 16px 69px;
            position: relative;
            border-radius: 6px;
            margin-bottom: 10px;
            color: #666;
            line-height: 1.5;
            border: 1px solid #ffeecc;
            background-color: #fff7e6;
            font-size: 12px;
            color: #999;
            line-height: 21px;
            margin-left: 25px;
        }
        th{
            border: 1px solid #ddd;
            text-align: center;
        }
        .personality {
            position: relative;
            padding: 10px 8px;
        }
        .weekend {
            color: red;
        }

        .personality .arrow {
            border-bottom: 11px solid #2db7f5;
            border-left: 11px solid transparent;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .usable {
            cursor: pointer;
        }

        .people-table tbody .personality.disabled {
            background: #c1c1c1;
            color: #fff;
        }
        .personality.usable .off {
            color: #53c5ae;
        }
        td {
            font: 12px/150% "微软雅黑";
        }
        .people-table td, .people-table th {
            border: 1px solid #ddd;
            text-align: center;
        }
        th, td {
            padding: 0px;
        }

        .ant-dropdown {
            position: absolute;
            left: -9999px;
            top: -9999px;
            z-index: 1050;
            display: block;
            font-size: 12px;
            font-weight: normal;
            line-height: 1.5;
        }
        .ant-dropdown {
            list-style-type: none;
            padding: 0;
            margin: 0;
            text-align: left;
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0 1px 6px rgba(99,99,99,.2);
            background-clip: padding-box;
            border: 1px solid #d9d9d9;
            padding: 10px 15px;
        }
        .duletit {
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom: 1px solid #ddd;
            margin-bottom: 5px;
        }
        .ant-menu-inline, .ant-menu-vertical {
            border-right: none;
            border-radius: 6px;
        }
        .ant-menu-root.ant-menu-vertical, .ant-menu-root.ant-menu-inline {
            box-shadow: none;
        }
        .ant-menu-item, .ant-menu-submenu, .ant-menu-submenu-title {
            cursor: pointer;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        .ant-menu-item, .ant-menu-submenu-title {
            margin: 0;
            position: relative;
            display: block;
            white-space: nowrap;
        }
        .ant-menu-inline .ant-menu-item, .ant-menu-vertical .ant-menu-item {
            border-right: 1px solid #e9e9e9;
            margin-left: -1px;
            left: 1px;
            position: relative;
            z-index: 1;
        }
        .ant-menu-vertical > .ant-menu-item, .ant-menu-inline > .ant-menu-item, .ant-menu-item-group-list > .ant-menu-item, .ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title {
            padding: 0px 16px 0 28px;
            font-size: 12px;
            line-height: 42px;
            height: 42px;
        }
        .ant-menu-inline .ant-menu-item, .ant-menu-vertical .ant-menu-item {
            border-right: none;
            padding-left: 5px;
            height: 34px;
            line-height: 34px;
        }
        .hedul {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-left: 5px;
            margin-right: 5px;
            background:#dadada;
        }
        .ant-menu-item:hover{
            background-color: #2baee9;
            color: #fff;
        }
        .btns{
            background: #fff;
            text-align: right;
            margin-bottom: 10px;
        }


        .btn{
            display: inline-block;
            margin-bottom: 0;
            font-weight: normal;
            text-align: center;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            line-height: 1.5;
            padding: 4px 15px;
            font-size: 12px;
            margin-right: 10px;
            border-radius: 6px;
            transform: translate3d(0, 0, 0);
        }
        .save{
            color: #fff;
            background-color: #108ee9;
            border-color: #108ee9;
            color: #fff;
            transition-duration: 0.5s;
            transition-property: all;
            transition-timing-function: ease;
            transition-delay: 0s;
        }
        .save:hover{
            color: #ffffff;
            background-color: #49a9ee;
            border-color: #49a9ee;
        }

        .recover{
            margin-right: 10px;
            color: #666;
            background-color: transparent;
            border-color: #d9d9d9;
            color: #666;
            transition-duration: 0.5s;
            transition-property: all;
            transition-timing-function: ease;
            transition-delay: 0s;
        }

        .recover:hover{
            border-color: #d9d9d9;
            color: #666;
            color: #57c5f7;
            background-color: transparent;
            border-color: #57c5f7;
        }
        select{
            border-radius: 4px;
        }
        input{
            border-radius: 4px;
        }

    </style>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>
<body style="width: 99%;">
<div class="content">
    <div class="navs">
        <select class="selection">
            <option value="0">按部门</option>
            <option value="1">按人员</option>
        </select>
        <div class="search" id="backs" style="display: inline-block;float: right;padding: 6px 20px;font-size: 15px;letter-spacing: 2px;">返回</div>

        <div style="margin-top: 15px" class="ral">
            <textarea name="" id="s1" disabled style="width: 300px;height: 80px"></textarea>
            <a href="javascript:;" style="margin: 0 10px;" id="a1" class="a1">添加</a>
            <a href="javascript:;"  class="clear" style="color: red">清空</a>
        </div>
        <div style="margin-top: 15px;display: none" class="ras">
            <textarea name="" id="s2" disabled style="width: 300px;height: 80px"></textarea>
            <a href="javascript:;" style="margin: 0 10px;" id="a2" class="a2">添加</a>
            <a href="javascript:;"  class="clear" style="color: red">清空</a>
        </div>
        <div style="margin-top: 15px">
            <span>日期：</span><input class="dates" readonly type="text" style="padding: 0 10px;width: 60px" onclick="laydate({istime: true, format:'YYYY-MM'})">
            <div class="search" id="search" style="display: inline-block;">查询</div>

        </div>
    </div>

    <div class="mains">
        <div class="btns">
            <div class="save btn">保存</div>
            <div class="recover btn">恢复</div>

        </div>
        <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;white-space: nowrap;width: 100%;" class="people-table">
            <thead>
            <tr class="leaveData">
                <%--<th><div class="personality">姓名</div></th>--%>
            </tr>
            </thead>
            <tbody>
            <%--<tr>--%>
            <%--<td>--%>
            <%--<div class="personality usable">--%>
            <%--<span class="off">休息</span>--%>
            <%--</div>--%>
            <%--</td>--%>
            <%--</tr>--%>
            </tbody>
        </table>
        <div class="M-box3" id="dbgz_page"></div>
    </div>
    <div class="hint">请选择部门</div>
</div>
<%--窗口--%>
<div>
    <div class="ant-dropdown">
        <div>
            <div class="duletit">修改该员工当天排班</div>
            <ul class="ant-menu ant-menu-vertical  ant-menu-light ant-menu-root">
                <%--<li class="ant-menu-item" >--%>
                <%--<span class="hedul"></span>--%>
                <%--<span>正常班</span>--%>
                <%--</li>--%>
                <%--<li class="ant-menu-item" >--%>
                <%--<span class="hedul"></span>--%>
                <%--<span>正常班</span>--%>
                <%--</li>--%>
            </ul>
        </div>
    </div>
</div>
<script src="../js/attend/freeShift.js" type="text/javascript" charset="utf-8"></script>
<script>
    var objects = '';
    var elem = '';
    var price ={};

    $(function () {
        $('.M-box3').pagination({
            pageCount:10,
            jump:true,
            coping:true,
            homePage:'首页',
            endPage:'末页',
            prevContent:'上页',
            nextContent:'下页'
        });
        // 获取当前日期
        var nowDate = new Date();
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
            : nowDate.getMonth() + 1;
        var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
            .getDate();
        var dateStr = year + "-" + month;
        $('.dates').val(dateStr)

//        选择
        $('.selection').change(function () {
            if($('.selection option:selected').val()=='0'){
                $('.ral').show();
                $('.ras').hide();
            }
            if($('.selection option:selected').val()=='1'){
                $('.ras').show();
                $('.ral').hide();
            }

        })

        $('body').click(function () {
            $(".ant-dropdown").hide();
        })

        //        返回
        $('#backs').click(function () {
            parent.window.location.href='/attendanceWay/attindex'
        })

        //选择部门
        $('#a1').click(function(){
            dept_id="s1";
            $.popWindow("../../common/selectDept");
        })
        //选择人员
        $('.a2').click(function(){
            user_id="s2";
            $.popWindow("../../common/selectUser");
        });
        //清空
        $('.clear').click(function () {
            $(this).siblings('textarea').attr('deptid','');
            $(this).siblings('textarea').attr('deptname','');
            $(this).siblings('textarea').attr('privid','');
            $(this).siblings('textarea').attr('userpriv','');
            $(this).siblings('textarea').attr('dataid','');
            $(this).siblings('textarea').attr('username','');
            $(this).siblings('textarea').attr('user_id','');
            $(this).siblings('textarea').attr('userprivname','');
            $(this).siblings('textarea').val('');
        })

//        查询
        $('#search').click(function () {
            price = {date:$('.dates').val()};
            if($('#s1').val()==''&&$('#s2').val()==''){
                $('.hint').show();
                $('.mains').hide();
                return false
            }
            if($('.selection option:selected').val()=='0'){
                price.deptIds =$('#s1').attr('deptid');
            }else {
                price.userIds =$('#s2').attr('user_id');
            }

            $('.hint').hide();
            $('.mains').show();
            searchData(price)
        })

//        恢复
        $('.recover').click(function () {
            exhibition(objects)
        })
    })


    //         查询数据
    function searchData(data) {
        var layerMsg = layer.load(1,{icon: 0, shade: [0.6,'black']});
        data.page = 1;
        data.pageSize = 10;
        data.useFlag = 'true';
        var ajaxPage={
            data:data,
            page:function () {
                var me=this;
                $.ajax({
                    url:'/attendSchedule/freedomScheduleQuery',
                    dataType:'json',
                    data:me.data,
                    success:function(obj) {
                        layer.close(layerMsg)
                        if(obj.flag) {
                            objects = obj
                            exhibition(obj)
                        }else {
                            $('.hint').show();
                            $('.mains').hide();
                            $('.hint').text('暂无数据');
                        }
                        me.pageTwo(obj.totleNum,me.data.pageSize,me.data.page)
                    }
                })
            },
            pageTwo:function (totalData, pageSize,indexs) {
                var mes=this;
                $('#dbgz_page').pagination({
                    totalData: totalData,
                    showData: pageSize,
                    jump: true,
                    coping: true,
                    homePage:'',
                    endPage: '',
                    current:indexs||1,
                    callback: function (index) {
                        mes.data.page=index.getCurrent();
                        mes.page();
                    }
                });
            }
        };
        ajaxPage.page();
    }


    function exhibition(obj) {
        var nowMounth = obj.object;//本月具体天数
        var dataMounth = obj.obj;//本月人员数据
// 展示表头日期
        if(nowMounth.length){
            var str = '<th><div class="personality">姓名</div></th>';
            for(var i=0;i<nowMounth.length;i++){
                str += '<th><div class="rowtitle personality '+function () {
                        var clas = ''
                        if(nowMounth[i].week == '六'||nowMounth[i].week == '日'){clas+= 'weekend ';}
                        if(nowMounth[i].isDianJi == 'usable'){clas+= 'usable';}
                        return clas;
                    }()+'" data-row="'+i+'"><div>'+(i+1)+'</div><div>'+nowMounth[i].week+'</div>'+function () {
                        if(nowMounth[i].isDianJi == 'usable'){return '<div class="arrow"></div>'}else {return ''}
                    }()+'</div></th>'
            }
            $('.leaveData').html(str);
        }

        if(dataMounth.length){
            var arr = '';
            dataMounth.forEach(function (v,i) {
                arr += '<tr data-uid="'+v.uid+'"><td><div class="personality usable costitle" data-cos='+i+'>' +
                    '<span>'+v.userName+'</span><div class="arrow"></div></div></td>'+function () {
                        var arrs = '';
                        for(var j=0;j<v.map.length;j++){
                            arrs += '<td><div class="personality '+v.map[j].isDianJi+'" data-time="'+v.map[j].time+'" cos='+i+' row='+j+'><span class="'+function () {
                                    if(v.map[j].asName == '休息'){return 'off'}else {return ''}
                                }()+'">'+v.map[j].asName+'</span></div></td>'
                        }
                        return arrs;
                    }()+'</tr>'
            })

            $('tbody').html(arr);
        }
    }
</script>
</body>
</html>
